<template>
<div class="header">
  <div class="header-top" v-show="showHeader" :style="styles">
    <router-link to="/" tag="div" class="iconfont header-back">&#xe624;</router-link>
    <span>{{this.title}}</span>
  </div>
  <router-link to="/" tag="div" v-show="!showHeader" class="iconfont icon-back">&#xe624;</router-link>
  <div ref="header">
    <detail-banner
      :title = "title"
      :bannerImg = "bannerImg"
      :bannerList = "bannerList"
    ></detail-banner>
  </div>
</div>
</template>

<script>
import detailBanner from './banner'
export default {
  data () {
    return {
      showHeader: false,
      styles: {
        opacity: 1
      }
    }
  },
  props: {
    title: String,
    bannerImg: String,
    bannerList: Array
  },
  components: {
    detailBanner
  },
  methods: {
    handelScroll () {
      const headerHeight = this.$refs.header.offsetHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop < 5) {
        this.showHeader = false
      } else {
        this.showHeader = true
        this.styles.opacity = scrollTop > headerHeight ? 1 : scrollTop / headerHeight
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handelScroll)
  },
  deactivated () {
    // 有keep-alive时，在页面即将被隐藏或页面被替换的时候解除全局绑定
    window.removeEventListener('scroll', this.handelScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~_style/var.styl'
.iconfont
  font-size:.36rem
  font-weight: bold
.header
  position:relative
  .header-top
    position:fixed
    top:0
    z-index:3
    width:100%
    line-height: 0.86rem
    background: $bgColor
    font-size:.32rem
    color: #fff
    text-align:center
    .header-back
      width:.95rem
      float:left
  .icon-back
    position:absolute
    top:.1rem
    left:.1rem
    z-index:2
    width:.75rem
    height:.75rem
    overflow:hidden
    line-height:.75rem
    border-radius:.75rem
    font-size:.36rem
    color:#fff
    text-align:center
    background:rgba(0,0,0,0.5)
</style>
